import { ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormRadio, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import { Col, Divider, QRCode, Row } from "antd";
import moment from "moment";

const App:React.FC=()=>{
   interface DataType{
        position?:string,code?:string,name?:string,dsc?:string,value_standard?:string,value_result?:string,
        check_result?:string,memo?:string,degree?:string,
     };

     const columns:ProColumns<DataType>[]=[
        {dataIndex:'position',title:'部位'},{dataIndex:'code',title:'点检编码'},
        {dataIndex:'name',title:'点检项目'},{dataIndex:'degree',title:'等级'},
        {dataIndex:'dsc',title:'点检要求'},{dataIndex:'value_standard',title:'标准值'},
        {dataIndex:'value_result',title:'点检值'},
        {dataIndex:'check_result',title:'点检判定'},{dataIndex:'memo',title:'备注'},
        
     ];

     const tdata:DataType[]=[
        {position:'主转动轴',code:'DJ001',name:'主轴磨损度',degree:'A',dsc:'检查主轴的磨损状态，包括外观、表面光洁度、并予以测量际',
            value_standard:'光洁度<16',value_result:'15',check_result:'合格',memo:'注意日常使用维护',},
            {position:'主转动轴',code:'DJ002',name:'主轴变形',degree:'A',dsc:'检查主轴是否有变形、并予以测量际',
                value_standard:'变形度<5',value_result:'3',check_result:'合格',memo:'轻微变形',},
                {position:'主转动轴',code:'DJ003',name:'主轴润滑',degree:'B',dsc:'检查主轴的磨损状态，包括外观、表面光洁度、并予以测量际',
                    value_standard:'润滑良好',value_result:'润滑良好',check_result:'合格',memo:'润滑油偏稠，尽快更换',},
                    {position:'电气柜',code:'DQ001',name:'线缆连接',degree:'A',dsc:'检查线缆连接完好，无灼烧、松动、灰尘等',
                        value_standard:'完好',value_result:'完好',check_result:'合格',memo:'注意日常观察',},
                        {position:'电气柜',code:'DQ002',name:'元器件',degree:'B',dsc:'检查元器件的外观、连接等完好',
                            value_standard:'清洁，无故障',value_result:'良好',check_result:'合格',memo:'注意日常使用维护',},
         
     ];

    return <>
        <ProCard title='设备点检' style={{height:700}}   >
        <ProForm layout="horizontal" labelAlign="left" labelCol={{offset:0,span:3}} submitter={false}
             style={{marginLeft:300}} labelWrap
        >
            <Row gutter={8}>
                <Col span={4}>
                   <QRCode value="KM0012-006" size={120}  />
                </Col>
                <Col span={20}>
                   <ProFormText name='f1' label='设备编号' width={200} />
                   <ProFormText name='f2' label='设备名称' width={200} />
                </Col>
            </Row>
          </ProForm>
            <Divider />
            <ProForm layout="horizontal" labelAlign="left" labelCol={{offset:0,span:6}} submitter={false}
             style={{marginLeft:300}} labelWrap
             >
            <Row gutter={8}>
               <Col span={8}>
                   <ProFormText name='f3' label='部门'   width={200} />
                   <ProFormText name='f4' label='安装位置'   width={200} />
                   <ProFormText name='f5' label='设备管理人' width={200} />
               </Col>
                <Col span={8}>
                   <ProFormRadio.Group name='f7' label='状态'   width={200} 
                      options={[{value:0,label:'在用'},{value:1,label:'闲置'},{value:2,label:'租赁'}]}
                     />
                      <ProFormTextArea name='f6' label='备注'   width={300}
                      fieldProps={{
                        rows:3,
                      }}
                   />
                </Col>
                <Col span={8}>
                   
                   <ProFormRadio.Group name='f8' label='点检判定'   width={300} 
                      options={[{value:0,label:'不合格'},{value:1,label:'合格'}]}
                   />
                   <ProFormText name='f92' label='点检人'   width={200} />
                   <ProFormDatePicker name='f9' label='点检人'   width={200}  initialValue={moment()}/>
                </Col>
                 
            </Row>
            <ProTable<DataType>
                search={false}
                options={false}
                columns={columns}
                dataSource={tdata}
                />
        </ProForm>
        </ProCard>
    </>;
};

export default App;